<template>
	<view class="border-top position-fixed flex flex-column left-0 bottom-0 right-0 top-0">
		<view class="flex-1" id="polybox">
		</view>
		<view class="fixed-bottom">
			<view class=""  style="overflow-y: auto;height: 100%;">
				<view class="border-bottom px-2" v-for="(item,index) in list" :key="index">{{item.address}}</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import maps from "../../../static/maps.js"
	export default {
		data() {
			return {
				map: null,
				latitude: '',
				longitude: '',
				icon: null,
				list: []
			};
		},
		onLoad(options) {
			this.$nextTick(() => {
				let _this = this;
				_this.map = new AMap.Map('polybox', {
					zoom: 15, //缩放级别
					resizeEnable: true, //自动定位
				});
				_this.icon = new AMap.Icon({
					size: new AMap.Size(30, 30),
					image: 'http://image.sxxat.cn/ic_default_head.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(30, 30),
				});
				_this.getpolyline(options.start, options.end);
			})

		},
		methods: {
			getpolyline(start, end) {
				let _this = this;
				let opts = {
					url: 'Jz/SearchGj.shtml'
				};
				let param = {
					user_id: uni.getStorageSync('classUserId'),
					userId: uni.getStorageSync('userInfo').userId,
					authToken: uni.getStorageSync('token'),
					mapType: "gaode",
					startTime: start,
					endTime: end
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							if (res.data.data != '') {
								let data = res.data.data;
								_this.list = data;
								console.log(data);
								// let points = [{ latitude: 39.9085, longitude: 116.39747 }, { latitude: 39.9, longitude: 116.39 }];
								_this.latitude = data[0].latitude;
								_this.longitude = data[0].longitude;
								_this.map.setCenter([_this.longitude, _this.latitude]);
								let polyarr = [];
								data.forEach((item) => {
									polyarr.push([item.longitude, item.latitude]);
								});
								var polyline = new AMap.Polyline({
									path: polyarr,
									isOutline: true,
									outlineColor: '#ffeeff',
									borderWeight: 2,
									strokeColor: "#3366FF",
									strokeOpacity: 1,
									strokeWeight: 3,
									// 折线样式还支持 'dashed'
									strokeStyle: "solid",
									// strokeStyle是dashed时有效
									strokeDasharray: [10, 5],
									lineJoin: 'round',
									lineCap: 'round',
									zIndex: 50,
								})
								polyline.setMap(_this.map)
								_this.map.setFitView([polyline])
								// let passedPolyline = new AMap.Polyline({
								// 	map: _this.map,
								// 	// path: lineArr,
								// 	strokeColor: "#AF5", //线颜色
								// 	// strokeOpacity: 1,     //线透明度
								// 	strokeWeight: 6, //线宽
								// 	// strokeStyle: "solid"  //线样式
								// });
								// let marker = new AMap.Marker({
								// 	map: _this.map,
								// 	position: [_this.longitude, _this.latitude], //位置
								// 	icon: _this.icon, // 添加 Icon 图标 URL
								// 	offset: new AMap.Pixel(-15, -15), //偏移量
								// });
								// marker.on('moving', function(e) {
								// 	passedPolyline.setPath(e.passedPath);
								// });
								// let lineArr=[]
								// data.forEach((item)=>{
								// 	let params=[item.longitude,item.latitude];
								// 	lineArr.push(params)
								// })
								// marker.moveAlong(lineArr, 200);
							} else {
								uni.showToast({
									title: '该时间段无轨迹',
									icon: "none"
								})
								uni.getLocation({
									type: 'wgs84',
									success: function(lb) {
										uni.hideLoading()
										console.log('当前位置的经度：' + lb.longitude);
										console.log('当前位置的纬度：' + lb.latitude);
										console.log(lb.longitude, lb.latitude);
										var result = gcoord.transform(
											[lb.longitude, lb.latitude], // 经纬度坐标
											gcoord.WGS84, // 当前坐标系
											gcoord.GCJ02 // 目标坐标系
										);
										_this.map.setCenter(result);
										console.log(result); // [116.41661560068297, 39.92196580126834]
									},
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
	}

	map {
		width: 100%;
		height: 100%;
	}

	.fixed-bottom {
		width: 750rpx;
		height: 300rpx;
		background-color: #FFFFFF;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}
</style>
